<template>
  <!-- 拼多多商品属性组件 -->
  <div>
    
    <el-form :model="propertyForm" 
      ref="propertyForm" 
      label-position="right"
      label-suffix="："
      :label-width="formLabelWidth" 
      :rules="rules" 
    >

      <el-form-item label="运费模板" prop="templateId">
        <el-select v-model="propertyForm.templateId" clearable class="width-300">
          <el-option v-for="item in freightTemplateList" 
            :key="item.template_id" 
            :label="item.template_name" 
            :value="item.template_id">
          </el-option>
        </el-select>
      </el-form-item>
      
    </el-form>

  </div>
</template>

<script>
  import { getFreightTemplate } from '@/api/third/thirdGoods'

  export default {
    props: {
      formLabelWidth: {
        type: String
      },
      // 商品属性对象
      propertyObj: {
        type: Object
      }
    },
    data() {
      return {
        // 商品属性对象
        propertyForm: {
          templateId: '',
          promiseDeliveryType: ''
        },
        // 表单规则
        rules: {
          templateId: [
            { required: true, message: '请选择运费模板' }
          ]
        },
        // 发货时间
        promiseDeliveryTypeList: [
          { id: 1, name: '24小时' },
          { id: 2, name: '48小时' },
          { id: 3, name: '72小时' }
        ],
        // 运费模板列表
        freightTemplateList: []
      }
    },
    created() {
      // 获取运费模板
      getFreightTemplate(this.propertyObj.platformType, this.propertyObj.shopId).then(response => {
        if (response.isError) return
        this.freightTemplateList = response.data
      })
    },
    mounted() {
    },
    methods: {
      // 表单校验 true：成功 false：失败
      checkForm() {
        let ret = true
        this.$refs['propertyForm'].validate((valid, result) => {
          if (!valid) {
            // const propKeys = Object.keys(result)
            // this.$refs['propertyForm'].fields.forEach(field => {
            //   const index = propKeys.indexOf(field.prop)
            //   if (index !== -1) {
            //     this.$emit('addVaildShow', field)
            //   }
            // })
            ret = false
          }
        })
        return ret
      },
      // 提交表单
      submitForm() {
        return this.propertyForm
      }
    }
  }
</script>

<style scoped>

</style>